<template>
  <div class="pie">
    <div id="chartLineBox" style="width: 40%;height: 40vh;"></div>
    <div id="chartLineBoxx" style="width: 50%;height: 40vh;"></div>
  </div>
</template>

<script>
var echarts = require('echarts');
import axios from 'axios'

export default {
  data() {
    return {
      day: [],
      val: []
    }
  },
  methods: {
    fun1() {
      this.$axios({
        url: '/z/echarts_val/'
      }).then(res => {

        for (var i in res.data) {
          this.val.push(parseFloat(res.data[i].values[0]))
          this.day.push(res.data[i].date)
        }
        console.log(res.data)
        let myChart = echarts.init(document.getElementById('chartLineBox'))
        // 绘制图表

        myChart.setOption({
          title: {text: '前一个月美金的汇率'},
          tooltip: {},
          xAxis: {
            boundaryGap: false,
            name: 'day',
            data: this.day
          },
          yAxis: {
            color: '#FA6F53',
            fontSize: 16,
            scale: true,
            max: 6.6,
            min: 6.4,
            padding: [0, 0, 10, 0],
            name: '汇率'
          },
          series: [{
            type: 'line',
            data: this.val,
            lineStyle: {
              normal: {
                color: '#8AE09F',
              }
            }
          }]
        })
      })
    },
    fun2() {
      var _this = this
      var socket = new WebSocket('ws:127.0.0.1:8000/z/echartsday_val/')
      socket.onopen = function () {
        console.log('WebSocket open');//成功连接上Websocket
      };
      socket.onmessage = function (e) {
        var data = []
        var hl = []
        var day1 = []
        var time = []
        data = JSON.parse(e.data)
        for (var i in data) {
          hl.push(data[i].hl)
          day1.push(data[i].day)
          time.push(data[i].time)
        }
        // if (document.getElementById('chartLineBoxx') == null) {
        //   return  // 防止包黄  There is a chart instance already initialized on the dom
        // }
        // echarts.dispose(document.getElementById('chartLineBoxx'))
        let myChartc = echarts.init(document.getElementById('chartLineBoxx'))
        // 绘制图表
        myChartc.setOption({
          title: {text: day1[0]},
          tooltip: {},
          xAxis: {
            boundaryGap: false,
            name: 'time',
            data: time
          },
          yAxis: {
            color: '#FA6F53',
            fontSize: 16,
            scale: true,
            max: 6.6,
            min: 6.4,
            name: '汇率'
          },
          series: [{
            type: 'line',
            data: hl,
            lineStyle: {
              normal: {
                color: '#8AE09F',
              }
            }
          }]
        })
      };
    }
  },
  mounted() {
    this.fun2()
    this.fun1()
  },
}
</script>

<style scoped>

</style>
